import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//外部想import 引用 必须加export
export const store = new Vuex.Store({
	strict:true,
	//使 Vuex store 进入严格模式，在严格模式下，任何 mutation 处理函数以外修改 Vuex state 都会抛出错误。
	
	//存储数据
	state:{
		products:[
			{name:"马云",price:200},
			{name:"马化腾",price:140},
			{name:"马冬梅",price:20},
			{name:"马蓉",price:10},
		]
		
	},
	/*
	* 获取数据
	* Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。
	* 就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，
	* 且只有当它的依赖值发生了改变才会被重新计算。
	*/
	getters:{
		saleProducts:(state)=>{	
			var saleProducts = state.products.map(product=>{
				return{
					name:"**" + product.name + "**",
					price:product.price/2
				};
			});
			return saleProducts;
		}
		
	},
	//更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件
	mutations:{
		
			reducePrice: (state,payload) =>{
				//setTimeout(function(){
					//forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
					state.products.forEach(product => {
						product.price -= payload;
					})	
				//},3000);			
			}	
			
	},
	/*
	* Action 类似于 mutation，不同在于：
	* Action 提交的是 mutation，而不是直接变更状态。
	* Action 可以包含任意异步操作。
	*/
	
	actions:{
		reducePrice:(context,payload)=>{
			setTimeout(function(){
				context.commit('reducePrice',payload);
			},2000);
		}
		
	}
	
})